<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title th:text="${course.name}"></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/component/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/assets/css.css}"/>
    <link rel="stylesheet" th:href="@{/assets/style.css}"/>
    <link rel="stylesheet" th:href="@{/assets/global.css}"/>
</head>
<body>
<!-- 顶部 -->
<th:block th:include="edu/front/common/header :: header"/>
<div class="course_body">
    <div class="w1220 course_nav">
	        <span class="layui-breadcrumb">
	            <a th:href="@{/front/index}">首页</a>
	            <a th:href="@{/front/course}">课程</a>
	          <a><cite th:text="${course.name}"/></a>
	        </span>
    </div>
    <div class="w1220 course_intro">
        <div class="course_img">
            <img th:src="${course.imageUrl}"/>
        </div>
        <div class="course_detail">
            <h1 th:text="${course.name}"/></h1>
            <div class="some">
                <p> 课程类别：<span th:text="${classify.dataLabel}"></span></p>
                <p th:if="${course.type=='free'}">课程类型：免费课程</p>
                <p th:if="${course.type=='audition'}">课程类型：<strong style="color: red">VIP课程</strong></p>
            </div>
            <a th:if="${course.type=='free'}" class="layui-btn layui-btn-lg">免费在线学习该课程</a>
            <a th:if="${course.type=='audition'}" th:onclick="Pay([[${course.id}]])" style="background: red"
               class="layui-btn layui-btn-lg"
               target="_blank">点击开通VIP会员学习本课程</a>
            <a th:if="${order!=null}" class="layui-btn layui-btn-lg" style="background: red">已购买现在学习该课程</a>
        </div>
        <div id="share" class="share"></div>
        <div class="course_img2">
            <img th:src="@{/assets/images/course_image.png}">
        </div>
    </div>

    <div class="w1220 course_content">
        <div class="content_left" id="content">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this"><h3>课程介绍</h3></li>
                    <li><h3>课程目录</h3></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" th:text="${course.content}"></div>
                    <div class="layui-tab-item">
                        <ul>
                            <!--                            <li th:each="item:${videos}">-->
                            <!--                                <h3 th:text="${item.name}"/>-->
                            <!--                                <video height="400" width="850" controls autobuffer>-->
                            <!--                                    <source th:src="${item.url}" type="video/mp4"/>-->
                            <!--                                </video>-->
                            <!--                            </li>-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="content_right">
            <div class="teacher">
                <div class="layui-tab" style="margin-bottom: 0px">
                    <ul class="layui-tab-title">
                        <li><h3>授课老师</h3></li>
                    </ul>
                    <div class="layui-tab-content" style="height: 100px;padding-bottom: 0px">
                        <div class="layui-tab-item layui-show">
                            <a href="/article/8" target="_blank"><img th:src="${teacher.avatar}"></a>
                            <a href="/article/8" target="_blank"><span th:text="${teacher.realName}"></span>
                                <p th:text="${teacher.remark}"></p></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="recommend">
                <div class="layui-tab" style="margin-bottom: 0px">
                    <ul class="layui-tab-title">
                        <li><h3>课程推荐</h3></li>
                    </ul>
                    <div class="layui-tab-content" style="padding-bottom: 0px;padding-right: 0px;">
                        <div class="layui-tab-item layui-show">
                            <ul class="rcourse">
                                <li th:each="item:${tuijian}">
                                    <img th:src="@{/assets/images/hot.gif}">
                                    <span><a th:onclick="Detail([[${item.id}]])" th:text="${item.name}"/></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<th:block th:include="edu/front/common/footer :: footer"/>
<th:block th:include="edu/front/common/js :: js"/>
<script>
</script>
</body>
</html>